<route>
{
  "meta": {
    "requiresAuth": false
  }
}
</route>
<template>
    <div class="home-container">
        <van-nav-bar class="top-nav">
            <van-button
                slot="title"
                class="search-btn"
                icon="search"
                type="info"
                round
                size="small"
                to="/search"
            >搜索</van-button>
        </van-nav-bar>
        <van-tabs v-model="active" swipeable @change="handleChange">
            <van-tab v-for="channel in userChannels" :title="channel.name" :key="channel.id">
                <articleList :channel="channel" ref="articleList"/>
            </van-tab>
            <div slot="nav-right" class="fill-box"></div>
            <div class="edit-channel" slot="nav-right">
                <van-icon name="wap-nav" class="edit-channel-icon" @click="isEditChannel=true"/>
            </div>
        </van-tabs>
        <van-popup
            class="channel-edit-popup"
            v-model="isEditChannel"
            position="bottom"
            round
            closeable
            close-icon-position="top-left"
            style="height: 100%"
            get-container="body"
        >
            <channelEdit
                :user-channels="userChannels"
                :active.sync="active"
                @toChannel="toChannel"
            />
        </van-popup>
    </div>
</template>
<script>
import articleList from 'com/home/articleList';
import channelEdit from 'com/home/channelEdit';
import { mapState } from 'vuex';
import * as Api from 'api/common';
import { getItem } from '@/utils/storage';

export default {
    name: 'home',
    components: {
        articleList,
        channelEdit
    },
    data () {
        return {
            active: 0,
            userChannels: [],
            isEditChannel: false
        };
    },
    computed: {
        ...mapState(['user'])
    },
    methods: {
        handleChange (tab) {
            let articleList = this.$refs.articleList;
            articleList.forEach(item => {
                if (item.channel.name === this.userChannels[tab].name) {
                    item.setScorll();
                }
            });
        },
        async getUserChannels () {
            let channels = [];
            if (this.user) { // 登入了，用线上的接口
                const res = await Api.reqDev('/v1_0/user/channels');
                if (res.message === 'OK') channels = res.data.channels;
            } else {
                const localChannels = getItem('user-channels');
                if (localChannels && localChannels.length) channels = localChannels; // 未登入但本地有数据，用本地数据
                else { // 未登入也无本地数据，用线上默认的数据
                    const res2 = await Api.reqDev('/v1_0/user/channels');
                    if (res2.message === 'OK') channels = res2.data.channels;
                }
            }
            this.userChannels = channels;
        },
        toChannel (index) {
            this.isEditChannel = false;
            this.active = index;
        }
    },
    created () {
        this.getUserChannels();
    }
};
</script>
<style lang="less" scoped>
.home-container {
    height: calc(100vh - 55px);
    overflow: auto;
    display: flex;
    flex-direction: column;
    .top-nav {
        background-color: #3c19fa;
        /deep/ .van-nav-bar__title {
            max-width: none;
        }
        .search-btn {
            width: 277px;
            height: 32px;
            .van-icon {
                color: #fff;
                font-size: 16px;
            }
            .van-button__text {
                font-size: 14px;
            }
        }
    }
    .van-tabs {
        flex: 1;
        overflow: auto;
        display: flex;
        flex-direction: column;
        /deep/ .van-tabs__wrap {
            .edit-channel {
                position: fixed;
                right: 0;
                height: 43px;
                background: #fff;
                opacity: 0.8;
                display: flex;
                align-items: center;
                .edit-channel-icon {
                    border-left: 1px solid #ccc;
                    padding: 0 6px;
                }
            }
            .fill-box {
                width: 37px;
                flex-shrink: 0;
            }
            .van-tabs__nav {
                .van-tab {
                    border-right: 1px solid #edeff3;
                    border-bottom: 1px solid #edeff3;
                }
                .van-tabs__line {
                    width: 15px;
                    height: 3px;
                    background: #3296fa;
                    bottom: 20px;
                }
            }
        }
    }
}
</style>
